<template>
  <div class="main-panel">
    <div class="menus">
      <n-menu
        v-model:value="activeKey"
        mode="vertical"
        :options="menuOptions"
      />
    </div>
    <router-view style="padding: 20px; width: 100%"></router-view>
  </div>
</template>

<script setup>
import { AdminStore } from '../../store/AdminStore'
import { ref, reactive, inject, defineComponent, h } from 'vue'
import { useRouter, useRoute, RouterLink } from 'vue-router'
import { NIcon } from 'naive-ui'
import { BookOutline, FolderOutline, LogOutOutline, ChevronBackCircleOutline } from '@vicons/ionicons5'
const router = useRouter()
const route = useRoute()
const adminStore = AdminStore()
const axios = inject('axios')
const message = inject('message')

let menus = [
  { name: '文章管理', href: '/dashboard/article' },
  { name: '分类管理', href: '/dashboard/category' },
  { name: '退出', href: '/logout' },
]

function renderIcon(icon) {
  return () => h(NIcon, null, { default: () => h(icon) })
}
const menuOptions = [
  {
    label: () =>
      h(
        RouterLink,
        {
          to: '/dashboard/article',
        },
        { default: () => '文章管理' }
      ),
    key: 'article',
    icon: renderIcon(BookOutline),
  },
  {
        label: () =>
      h(
        RouterLink,
        {
          to: '/dashboard/category',
        },
        { default: () => '分类管理' }
      ),
    key: 'category',
    icon: renderIcon(FolderOutline),
  },
  {
    label: () =>
      h(
        RouterLink,
        {
          to: '/login',
        },
        { default: () => '退出登录' }
      ),
    key: 'logout',
    icon: renderIcon(LogOutOutline),
  },
    {
        label: () =>
            h(
                RouterLink,
                {
                    to: '/',
                },
                { default: () => '回到博客' }
            ),
        key: 'toBlog',
        icon: renderIcon(ChevronBackCircleOutline),
    },
]
const activeKey = ref("article")
const toPage = () => {}
</script>

<style lang="scss" scoped>
.main-panel {
  display: flex;
  color: #64676a;
  max-width: 1500px;
  margin: 0 auto;
}

.menus {
  padding: 20px 0;
  box-sizing: border-box;
  line-height: 55px;
  text-align: center;
  width: 180px;
  height: 100vh;
  border-right: 1px solid #dadada;
}
</style>
